<template>
	<div style="background-color: antiquewhite;">
		<div v-for="item in ShopData" v-if="item.status == 1" class="d1">
			<img :src="item.icon" class="ig" />
			<div style="font-size: 20px; margin-top: 10px; border-bottom: #1f1f1f solid 1px;">{{item.gname}}</div>
			<div style="text-align: right; margin-top: 20px;">售价：￥{{item.price}}</div>
			<div style="text-align: right; margin-top: 10px;">数量：{{item.gnum}}</div>
			<div style="font-size: 10px; margin-top: 20px;">卖家：{{item.unumber}}
				<el-button type="primary" style="margin-left: 30px;" size="mini" @click="handleBuy(item)"> 购买
				</el-button>
			</div>
		</div>
		
		<!-- 购买弹出框 -->
		<el-dialog title="确定商品信息并选择数量" :visible.sync="dialogFormVisible" width="35%" style="text-align: center;">
			<el-form label-width="100px">
				<el-form-item label="消费者">
					<el-input v-model="form.buyNumber" disabled autocomplete="off" style="width: 75%;"></el-input>
				</el-form-item>
				<el-form-item label="销售者">
					<el-input v-model="form.sallNumber" disabled autocomplete="off" style="width: 75%;"></el-input>
				</el-form-item>
				<el-form-item label="商品单价">
					<el-input v-model="form.orderPrice" disabled autocomplete="off" style="width: 75%;"></el-input>
				</el-form-item>
				<el-form-item label="商品数量">
					<el-input v-model="form.orderNumber" autocomplete="off" @input="changeValue" style="width: 75%;">
					</el-input>
				</el-form-item>
				<el-form-item label="交易地点">
					<el-input v-model="form.orderAddress" autocomplete="off" @input="changeValue" style="width: 75%;">
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="buyGoods">确 定</el-button>
			</div>
		</el-dialog>
	</div>

</template>

<script>
	export default {
		data() {
			return {
				ShopData: [],
				form: {},
				unumber: '',
				dialogFormVisible: false
			}
		},
		methods: {
			load() {
				this.request.get("/goods/list").then(res => {
					this.ShopData = res
				})
			},

			// 检索输入内容
			changeValue(value) {
				this.params.time2 = /^[0-9]*$/.test(parseInt(value)) ? String(parseInt(value)).replace(".", "") : ""
			},

			handleBuy(item) {
				this.form.buyNumber = this.unumber;
				this.form.sallNumber = item.unumber;
				this.form.goodsId = item.id;
				this.form.orderPrice = item.price;
				this.dialogFormVisible = true;
			},

			buyGoods() {
				this.form.orderPrice =  this.form.orderPrice * this.form.orderNumber
				this.request.post("/order", this.form).then(res => {
					if (res.code != 500) {
						this.$message.success(res.message)
						this.dialogFormVisible = false
						this.load()
					} else {
						this.$message.error(res.message)
					}
				})
			},
			// 获取用户信息
			getUser() {
				let username = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : ""
				this.unumber = username.number;
			},
		},
		created() {
			this.load()
			this.getUser()
		}
	}
</script>

<style>
	.d1 {
		text-align: center;
		float: left;
		margin-left: 100px;
		margin-top: 20px;
		border: 1px solid #1f1f1f;
		padding: 20px;
	}
	.ig{
		width: 150px;
		height: 150px;
		border-radius: 50%;
		border: #00aa7f 1px solid;
	}
</style>
